{{ 'section-multicolumn.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>

<div class="tool-box tool-box-first">
    <div class="spec_multicolumn">
        <div class="multicolumn background-{{ section.settings.background_style }}{% if section.settings.title == blank %} no-heading{% endif %}">
            <div class="page-width">

              <h2 class="box-title"> {{ section.settings.header | escape }}</h2>

              <div class="title-wrapper-with-link title-wrapper--self-padded-mobile{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}">
                <h2 class="title">
                  {{ section.settings.title | escape }}
                </h2>             
              </div>

              <div class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}">
                <div class="media media--transparent media--{{ section.settings.image_ratio }}"
                >
                <img
                srcset="
                {%- if section.settings.image.width >= 323 -%}{{ section.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                {%- if section.settings.image.width >= 710 -%}{{ section.settings.image | img_url: '710x' }} 710w,{%- endif -%}
                  {%- if section.settings.image.width >= 1150 -%}{{ section.settings.image | img_url: '1150x' }} 1150w,{%- endif -%}
                  {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                  {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
                src="{{ section.settings.image | img_url: '1500x' }}"
                alt="{{ section.settings.image.alt | escape }}"
                loading="lazy"
                width="{{ section.settings.image.width }}"
                height="{{ section.settings.image.height }}"
              >
                </div>
              </div>
             
            </div>
          </div>
    </div>
</div>


{% schema %}
{
  "name": "Tool box first",
  "class": "spaced-section spaced-section--full-width",
  "tag": "section",
  "settings": [
  {
    "type": "text",
    "id": "header",
    "default": "Multicolumn",
    "label": "t:sections.multicolumn.settings.title.label"
  },
    {
      "type": "text",
      "id": "title",
      "default": "Multicolumn",
      "label": "t:sections.multicolumn.settings.title.label"
    },
    {
        "type": "image_picker",
        "id": "image",
        "label": "image"
      }
  ],
  "presets": [
    {
      "name": "Tool box first"
    }
  ]
}
{% endschema %}
